<template>
  <div id="overall">
    <div v-if="film">
      <div
        :style="{ backgroundImage: 'url(' + film.poster + ')' }"
        style="
            height: 300px;
            background-size: cover;
            background-position: center;
          "
      ></div>
      <div class="mx-3 mt-3">
        <div class="d-flex">
          <span class="h3 align-items-baseline">{{ film.name }}</span>
          <div class="text-center border border-light rounded mt-2 ml-1" id="typeborder">
            {{ film.filmType.name }}
          </div>
          <!-- <b-button style="height: 30px" size="sm">{{ film.filmType.name }}</b-button> -->
          <div class="ml-auto text-warning">
            <h4>{{ film.grade }}</h4>
          </div>
          <div class="mt-1 text-warning"><small>分</small></div>
        </div>
        <div id="description">
          <div>{{ film.category }}</div>
          <div>{{ film.premiereAt | filterToDate }}</div>
          <div>{{ film.nation }} | {{ film.runtime }} 分钟</div>
          <div :class="isShow ? 'synopsis' : ''" class="mt-3">
            {{ film.synopsis }}
          </div>
          <div v-if="isShow" @click="isShow = !isShow" class="d-flex justify-content-center">
            <b-icon-chevron-down></b-icon-chevron-down>
          </div>
          <div v-else @click="isShow = !isShow" class="d-flex justify-content-center">
            <b-icon-chevron-up></b-icon-chevron-up>
          </div>
        </div>
      </div>
      <div class="divide01"></div>
      <div class="m-3" style="height: 190px">
        <h6 class="my-3">演职人员</h6>
        <detail-swiper-actor :slides="5" swiperid="swiperid02">
          <div class="font-weight-lighter text-center swiper-slide" v-for="(data, index) in film.actors" :key="index">
            <img class="img-fluid" :src="data.avatarAddress" @click="handleActorPreview(index)" />
            <div class="t01">{{ data.name }}</div>
            <div class="t01">{{ data.role }}</div>
          </div>
        </detail-swiper-actor>
      </div>
      <div class="divide01"></div>
      <div class="m-3">
        <h6 class="my-3">剧照</h6>
        <detail-swiper-actor swiperid="swiper01">
          <div class="swiper-slide" v-for="(data, index) in film.photos" :key="index">
            <!-- <img class="img-fluid" :src="data" /> -->
            <img class="img-fluid" :src="data" @click="handlePreview(index)" />
          </div>
        </detail-swiper-actor>
      </div>
    </div>
  </div>
</template>

<script>
import maizuo from '@/utils/axiosMaiZuo.js';
import Vue from 'vue';
import DetailSwiperActor from './DetailSwiperActor.vue';
import Detail from '../views/detail.vue';
import { ImagePreview } from 'vant';

// Vue.use(ImagePreview);

Vue.filter('filterToDate', (utime) => {
  if (utime === undefined) return '暂无主演';
  var date = new Date(utime * 1000);
  return date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + ' 上映';
});

export default {
  components: { DetailSwiperActor, Detail },
  methods: {
    handleActorPreview(sequence) {
      // console.log(sequence);
      ImagePreview({
        images: this.imgActors,
        closeable: true,
        startPosition: sequence,
      });
    },
    handlePreview(sequence) {
      // console.log(sequence);
      ImagePreview({
        images: this.imgFilms,
        closeable: true,
        startPosition: sequence,
      });
    },
  },
  data() {
    return {
      imgFilms: [],
      imgActors: [],
      film: null,
      isShow: true,
    };
  },
  mounted() {
    var url = '/gateway?filmId=' + this.$route.params.id + '&k=7131054';
    maizuo({
      url: url,
    }).then((res) => {
      this.film = res.data.data.film;
      this.imgFilms = this.film.photos;
      // this.imgActors = this.film.photos;
      this.film.actors.forEach((element) => {
        this.imgActors.push(element.avatarAddress);
      });
      // console.log(this.imgActors);
    });
  },
};
</script>

<style scoped>
#description {
  color: gray;
  font-size: 0.8em;
}
#overall {
  background-color: whitesmoke;
  height: 500px;
}
.synopsis {
  height: 40px;
  overflow: hidden;
}
.t01 {
  font-size: 0.6rem;
  color: #1d1c1c;
}
.divide01 {
  width: 100%;
  height: 10px;
  background-color: rgb(221, 218, 218);
}
#typeborder {
  background-color: rgb(202, 199, 199);
  color: white;
  height: 20px;
  font-size: 0.6rem;
  width: 23px;
}
</style>
